<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=L3gfGpsqpWKGtYsVYrS4Wgz5"></script>
	<title>地图展示</title>
</head>
<body>
	<div>
		起始经度:<input id="slong"/>
		起始纬度:<input id="slang"/>
		终止经度:<input id="elong"/>
		终止纬度:<input id="elang"/>
		<button onclick="drawLine()">线条</button>
		<span id="location"></span>
	</div>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(108.952, 34.223), 3);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	  
	map.setCurrentCity('太原');          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	map.addEventListener('click', function(e) {
		document.getElementById('location').innerHTML = e.point.lng + ',' + e.point.lat
	});
	// 覆盖区域图层测试
	//map.addTileLayer(new BMap.PanoramaCoverageLayer());
	function drawLine() {
		var slong = document.getElementById('slong').value;
		var slang = document.getElementById('slang').value;
		var elong = document.getElementById('elong').value;
		var elang = document.getElementById('elang').value;
		// 绘制线
		var polyline = new BMap.Polyline([
			new BMap.Point(parseFloat(slong), parseFloat(slang)),
			new BMap.Point(parseFloat(elong), parseFloat(elang))
		], {
			strokeColor: 'blue',
			strokeWeight: 2,
			strokeOpacity: 0.5
		});
		map.addOverlay(polyline);
	}
	function drawLangLine() {
		for(var i = 0; i < 80; i+=5) {
			let c = i < 10 ? '0' + i : i;
			var polyline = new BMap.Polyline([
				new BMap.Point(180, i),
				new BMap.Point(-180, i)
			], {
				strokeColor: '#'+ c + '' + c + '' + c,
				strokeWeight: 2,
				strokeOpacity: 0.5
			});
			map.addOverlay(polyline);
		}
	}
	drawLangLine()
</script>